<!--
 * @Description: 
 * @Author: zhoucheng
 * @Github: https://github.com/zhoucheng-tt
 * @Date: 2021-12-12 21:47:30
 * @LastEditors: zhoucheng
-->
<!--  -->
<template>
  <div class='highcharts-3d'>
    <div class="bridge-scale"
         id="vehicleTypeDistri"
         :option="vehicleTypeDistriOptions">
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      vehicleTypeDistriOptions: {}, // 桥梁规模占比分析
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

    this.queryVehicleTypeDistri();

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
  //方法集合
  methods: {

    // 桥梁规模占比分析
    queryVehicleTypeDistri () {
      // 修改3d饼图绘制过程
      let each = window.Highcharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad;
      window.Highcharts.wrap(window.Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
        proceed.apply(this, [].slice.call(arguments, 1));
        if (!this.chart.is3d()) {
          return;
        }
        let series = this,
          chart = series.chart,
          options = chart.options,
          seriesOptions = series.options,
          depth = seriesOptions.depth || 0,
          options3d = options.chart.options3d,
          alpha = options3d.alpha,
          beta = options3d.beta,
          z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth
        z += depth / 2;
        if (seriesOptions.grouping !== false) {
          z = 0;
        }
        each(series.data, function (point) {
          var shapeArgs = point.shapeArgs,
            angle;
          point.shapeType = 'arc3d';
          var ran = point.options.h;
          shapeArgs.z = z;
          shapeArgs.depth = depth * 0.75 + ran;
          shapeArgs.alpha = alpha;
          shapeArgs.beta = beta;
          shapeArgs.center = series.center;
          shapeArgs.ran = ran;
          angle = (shapeArgs.end + shapeArgs.start) / 2;
          point.slicedTranslation = {
            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
          };
        });
      });
      (function (H) {
        H.wrap(window.Highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
          var ret = proceed.apply(this, [].slice.call(arguments, 1));
          ret.zTop = (ret.zOut + 0.5) / 100;
          return ret;
        });
      }(window.Highcharts));
      this.vehicleTypeDistriOptions = {
        chart: {
          type: 'pie',
          renderTo: "vehicleTypeDistri",
          backgroundColor: "rgba(0,0,0,0)",
          plotBackgroundImage: require("@/assets/images/bg-r.png"),
          // marginLeft: 120,
          // marginRight: 120,
          options3d: {
            enabled: true,
            alpha: 71,
          },
          events: {
            load: function () {
              var each = window.Highcharts.each,
                points = this.series[0].points;
              each(points, function (p) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran
                });
              });
            }
          }
        },
        title: {
          text: ''
        },
        credits: {
          enabled: false
        },
        colors: ["#21B4D6", "#CCAE00", "#00A777", "#15F3F5"],
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 34,
            innerSize: 130,
            showInLegend: true,
            dataLabels: {
              enabled: false
            }
          }
        },
        legend: {
          // layout: "vertival",
          align: "right",
          verticalAlign: "top",
          itemMarginTop: 10,
          borderWidth: 0,
          //给图例添加占比保留小数点后两位
          labelFormatter: function () {
            return this.name;
          },
          itemStyle: {
            color: "#ecfff5",
            fontSize: "11px"
          },
          itemHoverStyle: {
            color: "#cccccc"
          }
        },
        series: [{
          type: 'pie',
          // name: '车辆类型分布',
          data: [{
            name: '小桥',
            y: 30.0,
            h: 9
          }, {
            name: '中桥',
            y: 26.8,
            h: 5
          }, {
            name: '大桥',
            y: 12.8,
            h: 2
          }, {
            name: '特大桥',
            y: 1,
            h: 2
          }]
        }]
      };
      new window.Highcharts.chart(this.vehicleTypeDistriOptions);
    },
  },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.highcharts-3d {
  height: 100%;
  width: 40%;
  // border: 1px solid brown;
  .bridge-scale {
    width: 100%;
    height: 40%;
    background: #000f15;
  }
}
</style>